<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { UtilTool } from "@webxue/common";
import useForm from "@/hooks/useForm";
import useCusRouter from "@/hooks/useCusRouter";
import EventEmitTool from "@/utils/tools/event-emit.tool";
import { onMounted, reactive } from "vue";
import { useWebxRouteTabs } from "@webxue/vue3-antdv-ui";

// 获取路由属性
const { router, routeQuery } = useCusRouter({
  queryKeys:[
    // 字典值id
    "dictDataId",
    // 字典类型
    "dictType",
    // 是否只读
    "readonly"
  ]
});
const { addParentTab } = useWebxRouteTabs({ router });
// 获取详情hook
const { detailInfo, formRef, formState, onValidateFields, getFormRules } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    // 数据初始化
    formState.value.status = 1;

    if (!routeQuery.value.dictDataId) return false;
    const response = await BaseApi.dictData.find({ id: routeQuery.value.dictDataId });
    // 回显字典类型信息
    formState.value = UtilTool.lodash.cloneDeep(response.data);
    return Promise.resolve(response);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    // 响应结果
    let response: Partial<ResponseData> = {};
    // 请求参数
    const requestBody: Record<string, any> = {
      dictType: routeQuery.value.dictType,
      parentId: values.parentId,
      dictLabel: values.dictLabel,
      dictValue: values.dictValue,
      remark: values.remark,
      status: values.status,
    };
    if (routeQuery.value.dictDataId) {
      // 编辑
      response = await BaseApi.dictData.update({
        ...requestBody,
        id: routeQuery.value.dictDataId
      });
    } else {
      // 新增
      response = await BaseApi.dictData.save({
        ...requestBody
      });
    }
    if(response.success) {
      addParentTab();
    }
  }
});
// 获取节点树
const dictDataTree = reactive({
  dataSource:[],
  async setDataSource(){
    const response = await BaseApi.dictData.tree({
      dictType: routeQuery.value.dictType
    });
    dictDataTree.dataSource = response.data;
  }
})

// form保存回调
EventEmitTool.on("FORM:SAVE", () => {
  // 开始校验
  onValidateFields();
});

onMounted(async () => {
  await dictDataTree.setDataSource();
})
</script>

<template>
  <div>
    <WebxForm ref="formRef" :model="formState" :readonly="!!routeQuery.readonly">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'字典值' }">
          <ARow class="px-2 pb-4" :gutter="10">
            <ACol :span="8">
              <WebxFormItem label="上级节点" name="parentId">
                <ATreeSelect
                    v-model:value="formState.parentId"
                    style="width: 100%"
                    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="请选择上级节点"
                    allowClear
                    :fieldNames="{ children:'children', label:'dictLabel', value:'id' }"
                    :treeData="dictDataTree.dataSource"
                />
                <template #readonly>{{ formState.parentId }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="字典Label" name="dictLabel" :rules="[{ required: true, message:'请输入字典Label' }]">
                <AInput v-model:value="formState.dictLabel" placeholder="请输入字典Label" />
                <template #readonly>{{ formState.dictLabel }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="字典Value" name="dictValue" :rules="[{ required: true, message:'字典Value' }]">
                <AInput v-model:value="formState.dictValue" placeholder="字典Value" />
                <template #readonly>{{ formState.dictValue }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="状态" name="status">
                <ARadioGroup v-model:value="formState.status">
                  <ARadio :value="1">启用</ARadio>
                  <ARadio :value="2">停用</ARadio>
                  <ARadio :value="3">删除</ARadio>
                </ARadioGroup>
                <template #readonly>
                  <ATag color="green" v-if="formState.status === 1">启用</ATag>
                  <ATag color="red" v-if="formState.status === 2">停用</ATag>
                  <ATag color="red" v-if="formState.status === 3">删除</ATag>
                </template>
              </WebxFormItem>
            </ACol>
            <ACol :span="24">
              <WebxFormItem label="备注" name="remark">
                <ATextarea v-model:value="formState.remark" placeholder="请输入备注" :autoSize="{ minRows: 4, maxRows: 4 }" />
                <template #readonly>{{ formState.remark }}</template>
              </WebxFormItem>
            </ACol>
          </ARow>
        </WebxCard>
      </div>
    </WebxForm>
  </div>
</template>

<style scoped lang="less">
.ant-form-item {
  margin-bottom: 0;
  :deep(.ant-form-item-label){
    width: 120px;
  }
}
</style>
